
<link rel="stylesheet" href="__STATIC__/common_new.css?v=5">
<link rel="stylesheet" href="__STATIC__/package.css">
<style>
    .layui-layer-content .form-wrap {padding: 0}
    .layui-layer-page .layui-layer-content {overflow-y: auto!important;}
    .layui-layout-admin .layui-body .body-content {background: none;padding: 0}
    .info-wrap {display: flex}
    .info-wrap .layui-card {flex: 1;margin-top: 0}
    .info-wrap .layui-card:first-child {margin-right: 15px}
    .member-info {display: flex}
    .member-info .headimg {margin-right: 15px;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;overflow: hidden}
    .member-info .headimg img {max-width: 100%;height: auto}
    .member-info .info {flex: 1;width: 0;display: flex;flex-wrap: wrap}
    .member-info .info .data-item {width: 50%;padding-right: 10px;box-sizing: border-box;line-height: 30px}
    .member-info .data-item .layui-icon {cursor: pointer}
    .layui-tab-content {padding: 0}
    .screen {margin: 15px 0}
    .select-level-layer .layui-layer-content {overflow: unset!important;}
    .card-common{padding-top: 20px;}

    .screen .form-row {
        margin-left: 120px;
    }

</style>

<style>
    .body-content {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .summary-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .summary-wrap .summary-item {
        padding: 0 15px;
        box-sizing: border-box;
        flex: 1;
    }

    .summary-wrap .summary-item .title, .summary-wrap .summary-item .bottom-title {
        color: #909399;
        font-size: 14px;
        margin-top: 5px;
    }

    .summary-wrap .summary-item .value {
        color: #303133;
        font-size: 26px;
        margin-top: 10px;
    }
    .summary-wrap .last {
        width: 240px;
        flex: none;
        padding-left: 80px !important;
        border-left: 1px solid #eee;
    }

    .trend-wrap, .constitute-wrap, .distribution {
        display: flex;
    }
    .trend-wrap .common-wrap, .constitute-wrap .common-wrap, .distribution .wrap {
        flex: 1;
    }
    .trend-wrap .common-wrap:first-child, .constitute-wrap .common-wrap:first-child{
        margin-right: 0;
    }
    .distribution .wrap:first-child {
        margin-right: 15px;
        display: flex;
        justify-content: center;
    }
</style>

<title>用户</title>


<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href=""></a>
        <a><cite>会员统计</cite></a>
    </div>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">



            <div class="layui-card">
            <div class="common-wrap">
                <div class="head">
                    <div class="title">实时概况</div>
                    <div class="sub-title">更新时间：{:time_format()}</div>
                </div>
                <div class="body summary-wrap">
                    <div class="summary-item">
                        <div class="title">今日新增会员数</div>
                        <div class="value" id="today_member_count">{$info.today.new}</div>
                        <div class="bottom-title">昨日：<span id="yesterday_member_count">{$info.yesterday.new}</span></div>
                    </div>
                    <div class="summary-item">
                        <div class="title">今日展业会员数</div>
                        <div class="value" id="today_order_member_count">{$info.today.task}</div>
                        <div class="bottom-title">昨日：<span id="yesterday_order_member_count">{$info.yesterday.task}</span></div>
                    </div>
                    <div class="summary-item">
                        <div class="title">今日推广会员数</div>
                        <div class="value" id="today_member_recharge_member_count">{$info.today.pid}</div>
                        <div class="bottom-title">昨日：<span id="yesterday_member_recharge_member_count">{$info.yesterday.pid}</span></div>
                    </div>
                    <div class="summary-item">
                        <div class="title">今日提现会员数</div>
                        <div class="value" id="today_coupon_member_count">{$info.today.cash}</div>
                        <div class="bottom-title" >昨日：<span id="yesterday_coupon_member_count">{$info.yesterday.cash}</span></div>
                    </div>
                    <div class="summary-item last">
                        <div class="title">今日活跃</div>
                        <div class="value" id="buyed_count">{$info.today.active}</div>
                        <div class="bottom-title" >活跃到昨日：<span id="not_buyed_count">{$info.yesterday.active}</span></div>
                    </div>
                    <div class="echart">

                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="main" style="width: 250px; height: 110px;"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            </div>

        </div>
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-header">新增会员数</div>
                <div class="layui-card-body">
                    <div id="newAdd" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-header">消费会员数
<!--                    <div class="layui-btn-group layuiadmin-btn-group">-->
<!--                        <button class="layui-btn layui-btn-primary layui-btn-xs">去年</button>-->
<!--                        <button class="layui-btn layui-btn-primary layui-btn-xs">今年</button>-->
<!--                    </div>-->
                </div>
                <div class="layui-card-body">

                    <div id="consume" style="width: 100%; height: 300px;"></div>
                </div>
            </div>

        </div>
<div class="layui-col-md12 layui-col-space15">


    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">会员注册渠道比率</div>
            <div class="layui-card-body">

                <div id="channel" style="width: 100%; height: 200px;"></div>

            </div>
        </div>
    </div>
 <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">会员等级比率</div>
            <div class="layui-card-body">

                <div id="level" style="width: 100%; height: 200px;"></div>

            </div>
        </div>
    </div>

 <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">实名年龄比率</div>
            <div class="layui-card-body">
                <div id="age" style="width: 100%; height: 200px;"></div>
            </div>
        </div>
    </div>

        </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">访客地区分布</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-sm4">
                                    <table class="layui-table layuiadmin-page-table" lay-skin="line">
                                        <thead>
                                        <tr>
                                            <th>排名</th>
                                            <th>地区</th>
                                            <th>人数</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>浙江</td>
                                            <td>62310</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>上海</td>
                                            <td>59190</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>广东</td>
                                            <td>55891</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>北京</td>
                                            <td>51919</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>山东</td>
                                            <td>39231</td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>湖北</td>
                                            <td>37109</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="layui-col-sm8">
                                    <div id="china_echart" style="width: 800px;height: 600px">1</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

    </div>
</div>


<script>

    var baseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-color');


    //地图
    layui.use(['carousel', 'echarts'], function(){
        var $ = layui.$
            ,carousel = layui.carousel
            ,echarts = layui.echarts;

        var options = {
            title : {
                text: '2011全国GDP（亿元）',
                subtext: '数据来自国家统计局'
            },
            tooltip : {
                trigger: 'item'
            },
            dataRange: {
                orient: 'horizontal',
                min: 0,
                max: 55000,
                text:['高','低'],           // 文本，默认为数值文本
                splitNumber:0
            },
            series : [
                {
                    name: '2011全国GDP分布',
                    type: 'map',
                    mapType: 'china',
                    mapLocation: {
                        x: 'center'
                    },
                    selectedMode : 'multiple',
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name:'西藏', value:605.83},
                        {name:'青海', value:1670.44},
                        {name:'宁夏', value:2102.21},
                        {name:'海南', value:2522.66},
                        {name:'甘肃', value:5020.37},
                        {name:'贵州', value:5701.84},
                        {name:'新疆', value:6610.05},
                        {name:'云南', value:8893.12},
                        {name:'重庆', value:10011.37},
                        {name:'吉林', value:10568.83},
                        {name:'山西', value:11237.55},
                        {name:'天津', value:11307.28},
                        {name:'江西', value:11702.82},
                        {name:'广西', value:11720.87},
                        {name:'陕西', value:12512.3},
                        {name:'黑龙江', value:12582},
                        {name:'内蒙古', value:14359.88},
                        {name:'安徽', value:15300.65},
                        {name:'北京', value:16251.93, selected:true},
                        {name:'福建', value:17560.18},
                        {name:'上海', value:19195.69, selected:true},
                        {name:'湖北', value:19632.26},
                        {name:'湖南', value:19669.56},
                        {name:'四川', value:21026.68},
                        {name:'辽宁', value:22226.7},
                        {name:'河北', value:24515.76},
                        {name:'河南', value:26931.03},
                        {name:'浙江', value:32318.85},
                        {name:'山东', value:45361.85},
                        {name:'江苏', value:49110.27},
                        {name:'广东', value:53210.28, selected:true}
                    ]
                }
            ]
        };

        //没找到DOM，终止执行
        let echarts_div = echarts.init(document.getElementById('china_echart'), layui.echartsTheme);
        console.log(echarts)
        console.log(document.getElementById('china_echart'))
        console.log(echarts_div)
        echarts_div.setOption(options);

        $.ajax({
            type : "GET",
            url : "{:url('tj')}",
            //返回数据的格式
            datatype : "json",
            //成功返回之后调用的函数
            success : function(res) {
                var data = res.data;
                 console.log(data)

                // 基于准备好的dom，初始化echarts实例
                    if($('#main').length) {
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '7日新增用户',
                                // subtext: '7日新增用户统计',
                                textStyle: {
                                    fontSize: 10,
                                    color: '#4e4e4e',
                                },
                            },

                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            color: ['#2FCE63', '#F5CC4E'],
                            series: [{
                                // width: 100,
                                // height: 100,
                                name: '',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '12',
                                        color: baseColor
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    {
                                        value: data.task7.do,
                                        name: '展业',
                                        tooltip: {
                                            trigger: 'item',
                                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
                                            borderColor: '#999',
                                            borderWidth: 1,
                                            padding: 10,
                                            textStyle: {
                                                fontSize: 12,
                                                color: '#333'
                                            }
                                        }
                                    },
                                    {
                                        value: data.task7.no,
                                        name: '未展业',
                                        tooltip: {
                                            trigger: 'item',
                                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
                                            borderColor: '#999',
                                            borderWidth: 1,
                                            padding: 10,
                                            textStyle: {
                                                color: '#333',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                ]
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }


                // 基于准备好的dom，初始化echarts实例
                if($('#newAdd').length && $('#consume').length ) {


                    var newAddChart = echarts.init(document.getElementById('newAdd'));
                    var consumeChart = echarts.init(document.getElementById('consume'));


                    consumeChart.setOption(option);
                    newAddChart.setOption(data.register);

                };


            },
            //调用出错执行的函数
            error : function() {
                //请求出错处理
            }
        });



        if($('#channel').length)
        {

            var echart = echarts.init(document.getElementById('channel'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                               legend: {
                                   orient : 'vertical',
                                   x : 'left',
                                   data:['展业','未展业']
                               },
                color: ['#2FCE63', '#F5CC4E'],
                series: [{
                    width: 100,
                    height: 100,
                    top: -5,
                    left: 0,
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            color: baseColor
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 2,
                            name: '展业',
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                                borderColor: '#999',
                                borderWidth: 1,
                                padding: 10,
                                textStyle: {
                                    fontSize: 12,
                                    color: '#333'
                                }
                            }
                        },
                        {
                            value: 1,
                            name: '未展业',
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                                borderColor: '#999',
                                borderWidth: 1,
                                padding: 10,
                                textStyle: {
                                    color: '#333',
                                    fontSize: 12
                                }
                            }
                        }
                    ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            echart.setOption(option);

        }
if($('#level').length)
        {

            var echart = echarts.init(document.getElementById('level'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },

                color: ['#2FCE63', '#F5CC4E'],
                series: [{
                    width: 100,
                    height: 100,
                    top: -5,
                    left: 0,
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            color: baseColor
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: 2,
                            name: '展业',
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                                borderColor: '#999',
                                borderWidth: 1,
                                padding: 10,
                                textStyle: {
                                    fontSize: 12,
                                    color: '#333'
                                }
                            }
                        },
                        {
                            value: 1,
                            name: '未展业',
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(255, 255, 255, 0.7)',
                                borderColor: '#999',
                                borderWidth: 1,
                                padding: 10,
                                textStyle: {
                                    color: '#333',
                                    fontSize: 12
                                }
                            }
                        }
                    ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            echart.setOption(option);

        }


    });

    function getRandomColor(){
        return  '#' + (function(color){
            return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
            && (color.length == 6) ?  color : arguments.callee(color);
        })('');
    }
</script>

